<template>
    <div class="center" style="height: 100%;">
        <el-container style="height: 100%;">
            <el-aside 
            :width="this.$store.state.collapse.isCollapse?'auto':'230px'" 
            style=" height: 100%;">
                <el-menu router :default-active="$route.path" :collapse-transition="false" class="el-menu-vertical-demo"
                  :collapse="this.$store.state.collapse.isCollapse"
                    style="overflow: hidden;"  >
                    <el-menu-item index="/home/echarts">
                        <i class="el-icon-bangzhu"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-submenu index="/kucun">
                        <template slot="title">
                            <i class="el-icon-s-home"></i>
                            <span>库存管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-submenu index="/inku">
                            <template slot="title">入库管理</template>
                            <el-menu-item index="/home/kucun/inku/caigou">采购入库</el-menu-item>
                            <el-menu-item index="/home/kucun/inku/tuichu">采购退货出库</el-menu-item>
                            <el-menu-item index="/home/kucun/inku/panying">盘盈入库</el-menu-item>
                            <el-menu-item index="/home/kucun/inku/zhangku">涨库入库</el-menu-item>
                            <el-menu-item index="/home/kucun/inku/qita">其他入库</el-menu-item>
                            </el-submenu>
                            <el-submenu index="/outku">
                            <template slot="title">出库管理</template>
                            <el-menu-item index="/home/kucun/outku/chuku">销售出库</el-menu-item>
                            <el-menu-item index="/home/kucun/outku/tuihuoku">销售退货入库</el-menu-item>
                            <el-menu-item index="/home/kucun/outku/pankui">盘亏出库</el-menu-item>
                            <el-menu-item index="/home/kucun/outku/qita">其他出库</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="/home/kucun/tiaobo">
                                <span>库存调拨</span>
                            </el-menu-item>
                            <el-menu-item index="/home/kucun/tiaozheng">
                                <span>成本调整</span>
                            </el-menu-item>
                            <el-menu-item index="/home/kucun/pandiam">
                                <span>库存盘点</span>
                            </el-menu-item>
                            <el-menu-item index="/home/kucun/shisi">
                                <span>实时库存</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="/wanglai">
                        <template slot="title">
                            <i class="el-icon-s-goods"></i>
                            <span>往来管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-submenu index="/shoukuan">
                            <template slot="title">收款管理</template>
                            <el-menu-item index="/home/wanglai/shoukuan/yushou">销售预收</el-menu-item>
                            <el-menu-item index="/home/wanglai/shoukuan/shoukun">销售收款</el-menu-item>
                            <el-menu-item index="/home/wanglai/shoukuan/qita">其他收款</el-menu-item>
                            </el-submenu>
                            <el-submenu index="/wanglai/caigou">
                            <template slot="title">采购管理</template>
                            <el-menu-item index="/home/wanglai/CaiGou/yushou">采购预付</el-menu-item>
                            <el-menu-item index="/home/wanglai/CaiGou/fukuan">采购付款</el-menu-item>
                            <el-menu-item index="/home/wanglai/CaiGou/qita">其他付款</el-menu-item>
                            </el-submenu>
                            <el-submenu index="/wanglai/fapiao">
                            <template slot="title">发票登记</template>
                            <el-menu-item index="/home/wanglai/FaPiao/yushou">销售发票</el-menu-item>
                            <el-menu-item index="/home/wanglai/FaPiao/fahong">销售发票(红字)</el-menu-item>
                            <el-menu-item index="/home/wanglai/FaPiao/caigou">采购发票</el-menu-item>
                            <el-menu-item index="/home/wanglai/FaPiao/caigouhong">采购发票(红字)</el-menu-item>
                            </el-submenu>
                            <el-submenu index="/home/wanglai/yingshou">
                            <template slot="title">应收管理</template>
                            <el-menu-item index="/home/wanglai/yingshou/yushou">销售应收</el-menu-item>
                            <el-menu-item index="/home/wanglai/yingshou/qita">其他应收</el-menu-item>
                            <el-menu-item index="/home/wanglai/yingshou/heshi">收款核应收</el-menu-item>
                            </el-submenu>
                            <el-menu-item index="/home/wanglai/jieshou">
                                <i class="el-icon-s-check"></i>
                                <span>月末结转</span>
                            </el-menu-item>
                            <el-submenu index="/caowu">
                            <template slot="title">财务统计</template>
                            <el-menu-item index="/home/wanglai/caiwu/yushou">商品毛利(出库单)</el-menu-item>
                            </el-submenu>
                        </el-menu-item-group>
                    </el-submenu>

                    
                    <el-submenu index="/home/jichu">
                        <template slot="title">
                            <i class="el-icon-s-platform"></i>
                            <span>基础数据</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/home/jichu/kehu">
                                <span>客户</span>
                            </el-menu-item>
                            <el-menu-item index="/home/jichu/gongyingcang">
                                <span>供应商</span>
                            </el-menu-item>
                            <el-menu-item index="/home/jichu/cangku">
                                <span>仓库</span>
                            </el-menu-item>
                            <el-menu-item index="/home/jichu/wuliaoF">
                                <span>物料分类</span>
                            </el-menu-item>
                            <el-menu-item index="/home/jichu/wuliao">
                                <span>物料</span>
                            </el-menu-item>
                            <el-menu-item index="/home/jichu/jiliang">
                                <span>计量单位</span>
                            </el-menu-item>
                            <el-menu-item index="/home/jichu/bi">
                                <span>币种</span>
                            </el-menu-item>
                            <el-menu-item index="/home/jichu/yinhang">
                                <span>银行账户</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>


                    

                    <el-submenu index="/xitong">
                        <template slot="title">
                            <i class="el-icon-s-grid"></i>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/home/xitong/yonghu">
                                <span>用户管理</span>
                            </el-menu-item>
                            <el-menu-item index="/home/xitong/juese">
                                <span>角色管理</span>
                            </el-menu-item>
                            <el-menu-item index="/home/xitong/caidan">
                                <span>菜单管理</span>
                            </el-menu-item>
                            <el-menu-item index="/home/xitong/bumen">
                                <span>部门管理</span>
                            </el-menu-item>
                            <el-menu-item index="/home/xitong/jueyong">
                                <span>角色用户</span>
                            </el-menu-item>
                            <el-menu-item index="/home/xitong/bianma">
                                <span>编码校验规则</span>
                            </el-menu-item>
                            <el-menu-item index="/home/xitong/zidian">
                                <span>数据字典</span>
                            </el-menu-item>
                            <el-menu-item index="/home/xitong/zhiwu">
                                <span>职务管理</span>
                            </el-menu-item>
                            <el-menu-item index="/home/xitong/bumenwo">
                                <span>我的部门</span>
                            </el-menu-item>
                            <el-menu-item index="/home/xitong/tongxun">
                                <span>通讯录</span>
                            </el-menu-item>
                            <el-menu-item index="/home/xitong/duoshuju">
                                <span>多数据源管理</span>
                            </el-menu-item>
                            <el-menu-item index="/home/xitong/fenlei">
                                <span>分类字典</span>
                            </el-menu-item>
                            <el-menu-item index="/home/xitong/tonggao">
                                <span>系统通告</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="/xiaoxi">
                        <template slot="title">
                            <i class="el-icon-s-opportunity"></i>
                            <span>消息中心</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/home/xiaoxi/muban">
                                <i class="el-icon-s-check"></i>
                                <span>模板管理</span>
                            </el-menu-item>
                            <el-menu-item index="/home/xiaoxi/guanli">
                                <i class="el-icon-s-check"></i>
                                <span>消息管理</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main style="height: 100%; padding: 15px; background-color: #F0F3F4;">
                <router-view></router-view>
            </el-main>

        </el-container>
    </div>
</template>

<script>
import { addNavColor } from '../assets/style/configColor';
export default {
    mounted(){
        addNavColor('navblack')
    }
}
</script>

<style lang="less" scoped>
.el-menu-item{
    color: #000;
}
::v-deep .el-submenu__title{
    color: #000;
}
//下拉菜单主标题hover
::v-deep .el-submenu__title:hover {
    color: #1890ff !important;
    // background-color: #2b373d !important;
}

::v-deep .el-icon-arrow-down:before {
    color: var(--itemI) !important;
}

.el-aside::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.el-menu {
    border-right: none;
    // 背景+字体
    background-color: #fff;
    color: #000 ;

}

//滚动条里的小方块
.el-aside::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: transparent;
}

.el-aside {
     // 背景
    background-color: #fff;
    text-align: left
}

//滚动条中心部分
.left::-webkit-scrollbar-track {
    background-color: #fff;
}

.el-aside i {
    //图标
    color: var(--itemI) !important;
    margin-right: 10px;
}

//修改子菜单背景颜色
.el-menu-item-group {
    background-color: #fff!important;

    .el-menu-item {
        background-color: #fff !important;
    }
}

// 鼠标悬浮时，选中时子菜单的样式：
.el-menu-item:hover {
    outline: 0 !important;
    color: #1890ff !important;
    // background-color: #2b373d !important;
}
//选中时
::v-deep .el-menu-item.is-active{
    color: #1890ff !important;
   
}
::v-deep  .el-menu-item:focus{
    background-color: #fff !important;
    color: #1890ff !important;
}
</style>